---
  import type { InferGetStaticParamsType, GetStaticPaths } from "astro";
  import type { CollectionEntry } from "astro:content";
  import { getCollection } from "astro:content";
  import Layout from "@/layouts/Layout.astro";
  import dayjs from "dayjs";
  import "remark-alerts/styles/github-colors-light.css";
  import "remark-alerts/styles/github-base.css";
  import Prose from "@/components/Prose.astro";
  import Right from "@/components/Right.astro";

  export async function getStaticPaths() {
    const posts: CollectionEntry<"posts">[] = await getCollection("posts");
    return posts.map((post) => ({
      params: { slug: post.slug },
      props: { post },
    }));
  }

  const { post } = Astro.props;
  const { Content, remarkPluginFrontmatter } = await post.render();

  type Params = InferGetStaticParamsType<typeof getStaticPaths>;

  const { slug } = Astro.params as Params;

  const lastModified = dayjs(remarkPluginFrontmatter.lastModified).format(
    "YYYY-MM-DD HH:mm:ss"
  );

---

<Layout {...remarkPluginFrontmatter} frontmatter={remarkPluginFrontmatter}>
  <Prose>
    <p>阅读本篇文章大概需要 {remarkPluginFrontmatter.minutesRead} 分钟</p>
    <p class="text-gray-500">本篇摘要: {remarkPluginFrontmatter.excerpt}</p>

    <Content />
    <p>文章最后修改时间：{lastModified}</p>
  </Prose>

  <Right slot="right-sidebar" />

</Layout>

<style is:global>
  /* 自定义 Markdown 代码块样式 */
  @import url("@/styles/markdown.css");

  /* Markdown 插件 katex */
  @import url("https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css");

  /* Markdown 插件 rehypeAutolinkHeadings */
  @import url("@/styles/anchor.css");

  /* Markdown 插件 rehypeColorChips */
  @import url("@/styles/colorchip.css");

  /* Markdown 插件 remarkAlerts */
  @import url("@/styles/github-alert.css");

  /* Markdown 自定义插件 Github Card */
  @import url("@/styles/github-card.css");

  /* Markdown 复制代码 */
  @import url("@/styles/copy.css");
</style>

<script>
  // let copyButtonLabel = "复制代码";
  // let codeBlocks = Array.from(document.querySelectorAll("pre"));

  // for (let codeBlock of codeBlocks) {
  //   let wrapper = document.createElement("div");
  //   wrapper.style.position = "relative";

  //   let copyButton = document.createElement("button");
  //   copyButton.className = "copy-code";
  //   copyButton.innerHTML = copyButtonLabel;

  //   codeBlock.setAttribute("tabindex", "0");
  //   codeBlock.appendChild(copyButton);
  //   codeBlock.parentNode!.insertBefore(wrapper, codeBlock);
  //   wrapper.appendChild(codeBlock);

  //   copyButton.addEventListener("click", async () => {
  //     await copyCode(codeBlock, copyButton);
  //   });
  // }

  // async function copyCode(block: HTMLPreElement, button: HTMLButtonElement) {
  //   let code = block.querySelector("code");
  //   let text = code!.innerText;

  //   await navigator.clipboard.writeText(text);

  //   button.innerText = "复制成功！";

  //   setTimeout(() => {
  //     button.innerText = copyButtonLabel;
  //   }, 700);
  // }
</script>